<template>
  <div class="goods-details">
    <el-row class="details-content">
      <el-card shadow="always" style="height: 100%;overflow: auto;" v-loading="loading">
        <div v-if="isShowTopUp == 0">
          <h1>广告服务介绍</h1>
          <p>{{ adIntroduce }}</p>
          <div class="top-up">
            <el-card class="box-card">
              <div class="text item">
                投放一天
                <br />10￥
              </div>
            </el-card>
            <el-card class="box-card">
              <div class="text item">
                投放一周
                <br />50￥
              </div>
            </el-card>
            <el-card class="box-card">
              <div class="text item">
                投放一月
                <br />188￥
              </div>
            </el-card>
            <el-card class="box-card">
              <div class="text item">
                投放三月
                <br />588￥
              </div>
            </el-card>
            <el-card class="box-card">
              <div class="text item">
                投放半年
                <br />999￥
              </div>
            </el-card>
            <el-card class="box-card">
              <div class="text item">
                投放一年
                <br />1888￥
              </div>
            </el-card>
          </div>
          <!-- 广告投放服务按钮 -->
          <el-button
            @click="handleMyAD"
            type="success"
            style="display: block;margin: 20px auto;"
          >投放广告</el-button>
        </div>

        <div v-else-if="isShowTopUp == 1" style="height: 100%;">
          <!-- 富文本编辑器 -->
          <Editor v-model="textContent" style="height: 70%;"></Editor>
          <div class="submit-ad">
            <el-button @click="handleSubmit" type="primary">提交</el-button>
            <el-button @click="handleCancel" type="info">取消</el-button>
          </div>
          <el-dialog
            :title="title"
            :visible.sync="isShowUploadFrontCover"
            width="500px"
            append-to-body
          >
            <image-upload v-model="frontCover" />
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>
        </div>

        <div v-else-if="isShowTopUp == 2" class="top-up">
          <el-card class="top-up-card">
            <div @click="showPaymentCode('一天')" class>
              投放一天
              <span>10￥</span>
            </div>
          </el-card>
          <el-card class="top-up-card">
            <div @click="showPaymentCode('一周')" class>
              投放一周
              <span>50￥</span>
            </div>
          </el-card>
          <el-card class="top-up-card">
            <div @click="showPaymentCode('一月')" class>
              投放一月
              <span>188￥</span>
            </div>
          </el-card>
          <el-card class="top-up-card">
            <div @click="showPaymentCode('三月')" class>
              投放三月
              <span>588￥</span>
            </div>
          </el-card>
          <el-card class="top-up-card">
            <div @click="showPaymentCode('半年')" class>
              投放半年
              <span>999￥</span>
            </div>
          </el-card>
          <el-card class="top-up-card">
            <div @click="showPaymentCode('一年')" class>
              投放一年
              <span>1888￥</span>
            </div>
          </el-card>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import Editor from "@/components/Editor";
import { getAlipayView } from "../../api/mysystem/ad";

export default {
  name: "adDetails",
  data() {
    return {
      adIntroduce: `欢迎来到我们的校园二手商品交易平台，作为一家专注于为大学生提供便捷、安全交易体验的平台，我们致力于为用户搭建一个互动交流的社区。通过我们的广告服务，您可以有效地推广您的产品或服务，吸引更多目标用户，并增加品牌曝光度。
                    我们的广告服务具有以下特点和优势：
                    1.定位精准：我们的广告服务能够根据用户的个人资料、浏览记录和交易行为等数据，实现精准投放，将广告展示给最符合目标客户群体的用户，提高广告效果和转化率。
                    2.多样化广告形式：我们提供多种广告展示形式，包括横幅广告、原生内容推广、搜索推广等，满足不同广告主的需求，帮助您制定全面的广告推广策略。
                    3.详尽的数据分析报告：我们提供详尽的数据分析报告，包括点击量、转化率、ROI等关键指标，帮助您监测广告效果，优化广告投放策略，最大化广告投资回报。
                    4.专业的客户服务团队：我们拥有一支专业的客户服务团队，随时为您提供咨询、建议和技术支持，确保您在广告投放过程中顺利进行，取得预期效果。
                    无论您是想要推广校园活动、宣传社团招新，还是销售二手商品、提供兼职服务，我们的广告服务都能为您量身定制解决方案，并帮助您快速有效地达到营销目标。选择我们的广告服务，让您的品牌在校园内获得更多曝光，吸引更多目标用户，开启商机无限的校园市场之旅！感谢您选择我们的校园二手商品交易平台广告服务，让我们一起携手共创美好未来！`,
      title: "上传封面",
      //是否显示充值投放广告按钮
      isShowTopUp: 0,
      textContent: null,
      // 是否显示上传封面
      isShowUploadFrontCover: false,
      frontCover: null
    };
  },
  created() {},
  computed: {},
  methods: {
    //处理投放广告链接操作
    handleMyAD() {
      this.isShowTopUp = 1;
    },
    handleSubmit() {
      // 如果上传了封面则提交
      if (this.frontCover) {
        //提交，投放多久treatyDate，广告内容adContent
        //显示充值界面
        this.isShowTopUp = 2;
      } else {
        this.isShowUploadFrontCover = true;
      }
    },
    handleCancel() {
      this.isShowTopUp = 0;
      this.frontCover = null;
    },
    cancel() {
      this.isShowUploadFrontCover = false;
      this.frontCover = null;
    },
    submitForm() {
      this.isShowUploadFrontCover = false;
    },
    showPaymentCode(date) {
      //提交支付信息，获取二维码
      console.log("获取二维码");
      let money, expireDate;
      switch (date) {
        case "一天":
          money = 10;
          expireDate = 1;
          break;
        case "一周":
          money = 50;
          expireDate = 7;
          break;
        case "一月":
          money = 188;
          expireDate = 30;
          break;
        case "三月":
          money = 588;
          expireDate = 90;
          break;
        case "半年":
          money = 999;
          expireDate = 180;
          break;
        case "一年":
          money = 1888;
          expireDate = 365;
          break;
      }
      getAlipayView({
        money: money,
        textContent: this.textContent,
        frontCover: this.frontCover,
        expireDate: expireDate,
        username: this.$store.state.user.name,
      }).then(res => {
        // console.log("alipay-res=>",res.msg);
        this.$store.state.mysystem.aliPayView = res.msg;
        let routeUrl = this.$router.resolve({
          name: "aliPayView",
          query: { view: res.msg }
        });
        window.open(routeUrl.href, "_blank");
        // this.$router.push({"name":"aliPayView"})
        this.isShowTopUp = 1;
      });
    }
  },
  components: {
    Editor
  }
};
</script>

<style lang="scss" scoped>
.goods-details {
  height: 96vh;
  width: 82vw;
  // background-color: #e07171;
  margin: 0 auto;
  line-height: 2;
  .details-content {
    // background-color: #fff;
    height: 90%;
    position: relative;
    top: 5%;
    p {
      text-indent: 2em;
    }

    h1 {
      text-align: center;
    }
    .submit-ad {
      position: relative;
      top: 80px;
      text-align: center;
    }
    ::v-deep .el-card__body {
      height: 100%;
    }
    .top-up {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      margin-top: 20px;
      .box-card {
        margin: 10px 10px;
        width: 150px;
        height: 150px;
        .text {
          text-align: center;
          margin: 22px;
        }
      }

      .top-up-card {
        margin: 10px 10px;
        width: 300px;
        height: 200px;
        text-align: center;
        line-height: 200px;
        font-size: 20px;
        border-radius: 10px;
        cursor: pointer;
        &:hover {
          transform: translate(-5px, -10px);
          box-shadow: rgb(202, 202, 202) 3px 7px 10px;
        }
        span {
          color: rgb(253, 143, 79);
          font-weight: 700;
        }
        ::v-deep .el-card__body {
          padding: 0px;
        }
      }
    }
  }
}
</style>